<section style="width: 100%">
  <div class="devui-input-group devui-dropdown-origin" [ngClass]="{ 'devui-disabled': disabled }">
    <input
      class="devui-input devui-form-control"
      placeholder="y/MM/dd  -  y/MM/dd"
      name="dp"
      [attr.disabled]="disabled || null"
      [(ngModel)]="dateRange"
      (click)="toggleDatePicker(dateRangePicker)"
      autocomplete="off"
      [disabled]="disabled"
      dDateRangePicker
      #dateRangePicker="dateRangePicker"
      (selectedRangeChange)="getValue($event)"
      [ngClass]="{
        'devui-disabled': disabled
      }"
    />
    <div *ngIf="everyRange(dateRange) && !disabled" class="devui-input-group-addon close-icon-wrapper" (click)="dateRangePicker.clearAll()">
      <i class="icon icon-close"></i>
    </div>
    <div
      class="devui-input-group-addon"
      [ngClass]="{
        'devui-disabled': disabled
      }"
      (click)="toggleDatePicker(dateRangePicker)"
    >
      <i class="icon icon-calendar"></i>
    </div>
  </div>
  <div>
    <d-button bsStyle="common" (click)="disabled = !disabled">Toggle Date Range Picker</d-button>
  </div>
</section>
